<template>
       <div>

     <el-table :data="tableData" style="width: 100%;height:calc(100vh - 3.6rem)" cell-class-name="cell-row" header-cell-class-name="header-row">
     <el-table-column type="index" label="排序" />
    <el-table-column prop="type" label="风险数据类别" />
     <el-table-column prop="outflowArea" label="流出区域" />
      <el-table-column prop="outflowProvince" label="流出省份" />
       <el-table-column prop="outflowCity" label="流出城市" />
        <el-table-column prop="outflowCounty" label="流出县区" />
         <el-table-column prop="sellersCode" label="卖方标准代码" />
          <el-table-column prop="sellersName" label="卖方标准名称" />
           <el-table-column prop="sellersLevel" label="卖方渠道级别" />
    <el-table-column prop="sellersProperty" label="卖方客户性质 " />
        <el-table-column prop="sellersType" label="卖方商业形态大类 " />
            <el-table-column prop="inflowArea" label="流入区域 " />
            <el-table-column prop="inflowProvince" label="流入省份 " />
    <el-table-column prop="inflowCity" label="流入城市 " />
        <el-table-column prop="inflowCounty" label="流入县区 " />
            <el-table-column prop="buyersCode" label="买方标准代码 " />
     <el-table-column prop="buyersName" label="买方标准名称 " />
      <el-table-column prop="buyersLevel" label="买方渠道级别 " />
       <el-table-column prop="buyersProperty" label="买方客户性质 " />
        <el-table-column prop="buyersType" label="买方商业形态大类 " />
         <el-table-column prop="transactionType" label="交易类型 " />
      <el-table-column prop="directionDate" label="流向年月 " />
        <el-table-column prop="transactionDate" label="交易日期(时间) " />
          <el-table-column prop="dmsName" label="DMS产品名称 " />
             <el-table-column prop="salesQuantity" label="销售数量 " />
                <el-table-column prop="salesAmount" label="销售金额 " />
                   <el-table-column prop="needFeedback" label="是否需要反馈 " />

            <template #append>
             <div class="table-append">
                 <!-- <el-button size="small"  v-if="pagetotalbtn>pageNum && logding &&tableData.length>0" type="primary" :loading="true">正在加载</el-button> -->
                 <el-button size="small" v-if="datano && tableData.length>0" @click="getData"  :loading="logding" type="primary">点击加载更多</el-button>
                 <span v-if="!datano&& tableData.length>0">暂无更多数据</span>
            </div>
            </template>
            </el-table>
        </div>
</template>
<script>
export default {
  props:{
    tableData:{
      type:Array,
      default: ()=>{}
    },
      pagetotal:{
      type:[Number,Object],
      default: 0,
    },
      pageNum:{
      type:[Number,Object],
      default: 0,
      },
     logdingB:{
      type:Boolean,
      default: false,
    },
    datano:{
      type:Boolean,
      default: true,
    }
  },
         data(){
             return{
                 headerStyle:{
                     'background':'#F3F3F3'
                 },
                 pageNumbtn:this.pageNum,
                 pagetotalbtn:this.pagetotal,
                 logding:this.logdingB,
             }
         },
   watch: {
    pagetotal(val){
     
      // this.watchName = val;
       this.pagetotalbtn =val
        console.log(val)
      },

      pageNum:{
        immediate:true,
        handler(val){
            
            this.pageNumbtn =val
            console.log(val)
        }
      // this.watchName = val;
      },
      logdingB(val) {
      console.log(val)
      this.logding = val;
      }
  },
         methods:{
           getData(){
             this.logding = true
             this.$emit('getdata')
           }
         }
}
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
/deep/.el-table .header-row {
  background-color:#FFF8EC !important;
  height: 60px;
}
/deep/.el-table .header-row .cell{
    /* margin-top: 2.5rem; */
    text-align: center;
    font-size: 1rem;
font-weight: 400;
color: var(--el-color-text-3);
line-height: 22px;
}
/deep/.el-table__row .cell-row{
    height: 60px !important;
}
/deep/.cell-row .cell{
      text-align: center;
    font-size: 15px;
font-weight: 400;
color: var(--el-color-text-3);
line-height: 22px;
}
.table-append{
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}
</style>